<div id="div1" class="container-fluid">
	<br/>
	<br/>
	<hr/>

	<div class="row-fluid content-wrapper">

    	<ul class="nav nav-tabs">
    		<li id="type1" class="active"><a href="javascript:void(0)" >result</a></li>
    	</ul>
    	<div id="main-body">
    		<label class="label label-info">basic info</label>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<th>input</input>
					<th>number of sentences</th>
					<th>number of words</th>
					<th>number of unique words</th>
				</thead>
				<tbody>
					<tr>
						<td>input1</td>
						<td><?php echo $this->page["text1"]["sentences"];?></td>
						<td><?php echo $this->page["text1"]["words"];?></td>
						<td><?php echo $this->page["text1"]["unique_words"];?></td>

					</tr>
					<tr>
						<td>input2</td>
						<td><?php echo $this->page["text2"]["sentences"];?></td>
						<td><?php echo $this->page["text2"]["words"];?></td>
						<td><?php echo $this->page["text2"]["unique_words"];?></td>
					</tr>
				</tbody>
			</table>
			
			<div id="basic_info_chart"></div>
			
			<label class="label label-warning">English Char Frequency</label>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<th>char</th>
					<th>input1</th>
					<th>input2</th>	
				</thead>
				<tbody>
					<?php $eng_chars= array("a","b", "c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
						foreach ($eng_chars as $char){
							if (! isset($this->page["text1"]["chars"][$char])){
								$this->page["text1"]["chars"][$char] = 0;
							}
							if (! isset($this->page["text2"]["chars"][$char])){
								$this->page["text2"]["chars"][$char] = 0;
							}
							echo "<tr><td>".strtoupper($char)."/".$char."</td><td>".
								$this->page["text1"]["chars"][$char]."</td><td>".
								$this->page["text2"]["chars"][$char]."</td></tr>";
						}
					?>
				</tbody>	
			</table>
			
			<div id="chr_freq_chart1"></div>
			<div id="chr_freq_chart2"></div>
			
			<label class="label label-important">Top <?php echo count($this->page["text1"]["topk"]);?> Frequency Words</label>
			
			<table class="table table-striped table-bordered table-condensed" >
				<thead>
					<th>ith frequency</th>
					<th>word of input1</th>
					<th>appear time</th>
					<th>word of input2</th>
					<th>apper time</th>
				</thead>
				<tbody>
					<?php $times1 = array_values($this->page["text1"]["topk"]);
						$times2 = array_values($this->page["text2"]["topk"]);
						$word1 = array_keys($this->page["text1"]["topk"]);
						$word2 = array_keys($this->page["text2"]["topk"]);
						for ($i = 0; $i<count($word1); $i++){
							if (!isset($word1[$i])){
								$word1[$i] = "";
								$times1[$i] = "";
							}
							if (!isset($word2[$i])){
								$word2[$i] = "";
								$times2[$i] = "";
							}
							echo "<tr><td>".($i+1)."</td>".
								"<td>".$word1[$i]."</td>".
								"<td>".$times1[$i]."</td>".
								"<td>".$word2[$i]."</td>".
								"<td>".$times2[$i]."</td>";		
					}?>
				</tbody>
			</table>
			
			<div id="topk_chart1"></div>	
			<div id="topk_chart2"></div>
			
			
			<label class="label label-success">Similarity of Two Inputs</label>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<th>Union:total words</th>
					<th>Intersection:same words</th>
					<th>Similarity</th>
				</thead>
				<tbody>
					<tr>
						<?php foreach ($this->page["similarity"] as $info){
							echo "<td>".$info."</td>";
						}?>
					</tr>
				</tbody>
			</table>
		<div id="similarity"></div>
			
    	</div>
    	
   		<form method="get" action="index.php">
   		<input type="submit" class="btn btn-warning" value="try again">
   		</form>
	</div>
</div>

<script>

	var chart1; // globally available
	$(document).ready(function() {
   		chart1 = new Highcharts.Chart({
	        chart: {
				renderTo: 'basic_info_chart',
    	        type: 'bar'
	       	},
	        title: {
	            text: 'Basic Information'
	        },
	        xAxis: {
	            categories: ['Sentences', 'Words', 'Unique Words']
	        },
	        yAxis: {
	            title: {
	               text: 'Number in each input'
	            }
	        },
	        series: [{
	            name: 'input1',
	            data: [<?php echo $this->page["text1"]["sentences"].",".$this->page["text1"]["words"].",".$this->page["text1"]["unique_words"]?>]
	        }, {
	            name: 'input2',
	            data: [<?php echo $this->page["text2"]["sentences"].",".$this->page["text2"]["words"].",".$this->page["text2"]["unique_words"]?>]
	        }]
	     });
	});

	  
	var chart2;  
	$(document).ready(function() {
        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'chr_freq_chart1',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'English Char Frequency of input1'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'English Char Frequency',
                data: [
 					<?php 
 					$eng_chars= array("a","b", "c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
						foreach ($eng_chars as $char){
							if (! isset($this->page["text1"]["chars"][$char])){
								$this->page["text1"]["chars"][$char] = 0;
							}
							echo "['".strtoupper($char)."/".$char."',".
								$this->page["text1"]["chars"][$char]."],";
						}?>
                ]
            }]
        });
    });
    
    var chart3;  
	$(document).ready(function() {
        chart3 = new Highcharts.Chart({
            chart: {
                renderTo: 'chr_freq_chart2',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'English Char Frequency of input2'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'English Char Frequency',
                data: [
 					<?php 
 					$eng_chars= array("a","b", "c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");
						foreach ($eng_chars as $char){
							if (! isset($this->page["text2"]["chars"][$char])){
								$this->page["text2"]["chars"][$char] = 0;
							}
							echo "['".strtoupper($char)."/".$char."',".
								$this->page["text2"]["chars"][$char]."],";
						}?>
                ]
            }]
        });
    });
    
    var chart4;  
	$(document).ready(function() {
        chart3 = new Highcharts.Chart({
            chart: {
                renderTo: 'topk_chart1',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Top <?php echo count($this->page["text1"]["topk"])." Frequency Words of Input1'";?>
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Words Frequency',
                data: [
 					<?php foreach ($this->page["text1"]["topk"] as $word=>$time){
 						echo '["'.$word.'",'.$time. "],";
 					}
 					?>
                ]
            }]
        });
    });
    
    var chart5;  
	$(document).ready(function() {
        chart3 = new Highcharts.Chart({
            chart: {
                renderTo: 'topk_chart2',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Top <?php echo count($this->page["text1"]["topk"])." Frequency Words of Input2'";?>
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Words Frequency',
                data: [
 					<?php foreach ($this->page["text2"]["topk"] as $word=>$time){
 						
 							echo '["'.$word.'",'.$time."],";
 					}
 					?>
                ]
            }]
        });
    });

    var chart6;  
	$(document).ready(function() {
        chart3 = new Highcharts.Chart({
            chart: {
                renderTo: 'similarity',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'similarity'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Similarity',
                data: [
 					["Union-Intersection:Diff Words", <?php echo $this->page["similarity"][0] - $this->page["similarity"][1];?>],
 					["Intersection:Same Words", <?php echo $this->page["similarity"][1];?>],
                ]
            }]
        });
    });    
</script>